<script setup>
import { ref } from "vue";
import {goCommunity, gohire} from "../../tools/go";

const navlist = [
  { id: '1', name: '租金', icon: 'mdi-menu-down' },
  { id: '2', name: '位置', icon: 'mdi-menu-down' },
  { id: '3', name: '类型', icon: 'mdi-menu-down' },
  { id: '4', name: '更多', icon: 'mdi-menu-down' },
  { id: '5', name: '筛选', icon: 'mdi-menu-down' },
];

// 默认 activeItem 为第一个导航项的 id
const activeItem = ref(navlist[0].id);

const zslist = [
  {
    id:1,
    img:'./static/img/community/hire/fyn.jpeg',
    title:'花远家园公寓八分村南区155栋B户型103',
    time:'整租|新安|19-30m',
    title2:'剩余一间',
    price2:'2050元/月',
    icon:'mdi-heart-outline'
  },
  {
    id:2,
    img:'./static/img/community/hire/fyt.jpeg',
    title:'花远家园公寓八分村南区155栋B户型103',
    time:'整租|新安|19-30m',
    title2:'剩余一间',
    price2:'2050元/月',
    icon:'mdi-heart-outline'
  },
  {
    id:3,
    img:'./static/img/community/hire/fys.jpeg',
    title:'花远家园公寓八分村南区155栋B户型103',
    time:'整租|新安|19-30m',
    title2:'剩余一间',
    price2:'2050元/月',
    icon:'mdi-heart-outline'
  },
  {
    id:4,
    img:'./static/img/community/hire/fyf.png',
    title:'花远家园公寓八分村南区155栋B户型103',
    time:'整租|新安|19-30m',
    title2:'剩余一间',
    price2:'2050元/月',
    icon:'mdi-heart-outline'
  },
]
</script>

<template>
  <view class="titli">
    <v-icon @click="gohire()" class="icon" icon="mdi-chevron-left"></v-icon>
    <h3>租房</h3>
  </view>

<!-- 搜索框 -->
  <view class="box">
    <view class="search">
      <view class="search-one">
        <v-icon icon="mdi-magnify"></v-icon>
        <input type="text" placeholder="请输入地铁、商品、地点搜索">
      </view>
    </view>
  </view>
<!-- nav  -->
  <view class="nav">
    <ul>
      <li
          @click="activeItem = item.id"
          :class="{ active : activeItem === item.id }"
          v-for="(item, index) in navlist"
          :key="index"
      >
        <text>{{ item.name }}</text>
        <v-icon :icon="item.icon"></v-icon>
      </li>
    </ul>
  </view>
<!-- k -->
<view class="zslist w">
  <ul>
    <li v-for="(item, index) in zslist" :key="index">
      <img class="bg" :src="item.img">
      <a>
        <view class="box">
          <text class="x">{{ item.title }}</text>
          <text class="t">{{ item.time }}</text>
          <text class="thow">{{ item.title2 }}</text>
          <view class="i">
            <text>{{ item.price2 }}</text>
            <v-icon :icon="item.icon"></v-icon>
          </view>
        </view>
      </a>
    </li>
  </ul>
</view>
</template>

<style scoped lang="scss">
@import "../../static/css/title/index.css";
//租售列表
.zslist{
  ul::-webkit-scrollbar {
    display: none;
  }
  ul{
    li{
      .bg{
        width: 136px;
        height: 140px;
        border-radius: 10px;
      }
      a{

        .box{
          .x{
            font-size: 17px;
            font-weight: 400;
          }
          .t{
            margin-top: 5px;
            font-size: 14px;
            color: #cacaca;
          }
          .thow{
            margin-top: 5px;
            background: #362708;
            border-radius: 4px;
            width: 69px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #BEAB80;
            font-size: 12px;
          }
          .i{
            text{
              font-size: 17px;
              color: #fab011;
            }
            margin-top: 5px;
            display: flex;
            justify-content: space-between;
          }
          display: flex;
          flex-direction: column;
          margin-left: 11px;
        }
        display: flex;
      }
      display: flex;
      margin: 10px 0;
      width: 100%;
      border-radius: 10px;
      background: #FFFFFF;
      padding: 12px;
    }
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 78vh;
  }
  height: 78vh;
}
//nav
.nav {
  ul {
    li {
      &.active {
        color: #e02020;
      }
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      text {
        font-size: 17px;
      }
    }
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6vh;
  }
  width: 100%;
  background: #FFFFFF;
  margin: 0 auto;
}
//搜索框
.box{
  .search {
    .search-one {
      input {
        margin-left: 4px;
        width: 100%;
        border: none;
        outline: none;
      }
      display: flex;
      align-items: center;
      width: 90%;
      padding: 12px;
    }
    width: 90%;
    height: 50px;
    background: #d1d1d1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin: 0 auto;
  }
  width: 100%;
  background: #FFFFFF;
  height: 8vh;
}

body {
  background: #F6F6F6;
}
</style>
